<template>
		<view class="main_box">
			<u-navbar back-text="" title="往约到家" :background="background" title-color='#FFF' back-icon-color='#FFF'></u-navbar>
			<swiper class="sw_box" style="padding:10rpx;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" >
				<swiper-item v-for="(item,index) in list">
					<view class="swiper-item">
						<u-image width="100%" height="300rpx" :src="item.image"></u-image>
					</view>
				</swiper-item>
			</swiper>
			<view class="content" style="background-color: #FFFFFF;">
					<view class="info" style=""> 
						<text class="i_text">刮痧/火罐</text>
						<text class="i_text">已售:859</text>
						<text class="i_text">￥298元/次 100分钟								</text>
						<view class="i_text">服务功效：</view>
						<u-tag class="i_tag" text="舒筋活络" type="error" shape="circle"/>
						<u-tag  class="i_tag" text="放松肌肉" type="error" shape="circle"/>
						<u-tag  class="i_tag" text="除湿驱寒" type="error" shape="circle"/>
						<u-tag  class="i_tag" text="缓解疲劳" type="error" shape="circle"/> 
					</view>
			</view>
			
			<view class="tabTitleBox" style="margin: 0 10rpx;">
			    <view class="tabTitle" style="">
					<u-tabs name="cate_name" count="cate_count" :list="nameList" :is-scroll="false" :current="current" @change="change" active-color="#FF5B16" bar-width="320"></u-tabs>
					
				</view>
				<view  v-show="current === 0" class="u-content">
						<u-parse :html="content"></u-parse>	
				</view>
				
				<view  v-show="current === 1" class="u-content">
						<u-parse :html="content1"></u-parse>
				</view>
			</view>
			
			
			
			<!-- <view class="example-body">
				
				<uni-goods-nav @click="onClick"/>
			</view> -->
			<view class="example-body">
				<uni-goods-nav @click="onClick"/>
			</view>
			
			
		
			
		</view>
</template>

<script>
	import uniGoodsNav from '@/components/uni-goods-nav/uni-goods-nav.vue';
	export default {
			data() {
				return {
					// img:'/static/uview/example/massage.jpg',
					// img1:'https://cdn.uviewui.com/uview/swiper/3.jpg',
					background:{
						backgroundColor: '#19BE6B',
						backgroundSize: 'cover',
						backgroundImage: 'linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))',
						
						
					},
					list: [{
							image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
							title: '昨夜星辰昨夜风，画楼西畔桂堂东'
						},
						{
							image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
							title: '身无彩凤双飞翼，心有灵犀一点通'
						},
						{
							image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
							title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
						}
					],
					nameList: [{
										cate_name: '产品介绍'
									}, {
										cate_name: '下单须知',
										//cate_count: 5
									}
								],
					current: 0,
					content: `<p style="text-indent:40rpx;line-height:40rpx;padding:18rpx">拔罐是以罐为工具，利用燃火、抽气等方法产生负压，使之吸附于体表，造成局部瘀血，以达到通经活络、行气活血、消肿止痛、祛风散寒等作用的疗法。</p>`,
					content1:'`&nbsp;`',
					
					
				}
			},
			
			 onLoad() {
			 	//console.log(this.current);
				
			 },
			methods: {
				onClick(e) {
					uni.showToast({
						title: `点击${e.content.text}`,
						icon: 'none'
					})
				},
				buttonClick(e) {
					console.log(e)
					this.options[2].info++
				},
				change(index) {
					this.current = index;
					//content1:
					if(this.current==0){
						//console.log(this.current);
						this.content=`<p style="text-indent:40rpx;line-height:40rpx;padding:18rpx">拔罐是以罐为工具，利用燃火、抽气等方法产生负压，使之吸附于体表，造成局部瘀血，以达到通经活络、行气活血、消肿止痛、祛风散寒等作用的疗法。</p>`;
						this.content1=`&nbsp;`;
					}else{
						//console.log(this.current);
						this.content1=`<p style="text-indent:40rpx;line-height:40rpx;padding:18rpx">       拔火罐时，需要在一个温暖的环境中，避免拔火罐过程中受凉，拔罐时可以用毛毯或者薄被遮盖一下，同样也是避免拔罐过程中受凉。</p>`;
					  
					  this.content=`&nbsp;`;
					}
					//console.log(index);
				}
			}
		}
</script>

<style lang="scss" scoped>
	@import '@/common/uni-nvue.scss';
	
	.example-body {
		padding: 0;
		/* #ifndef APP-NVUE */
		display: block;
		/* #endif */
	}
	
	.goods-carts {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		position: fixed;
		left: 0;
		right: 0; 
		/* #ifdef H5 */
		left: var(--window-left);
		right: var(--window-right);
		/* #endif */
		bottom: 0;
	}
	.info{
		border: 1rpx solid#19BE6B;
		margin: 0 10rpx;
		border-radius: 30rpx;
	}
	.i_tag{
		margin-left: 30rpx;
		margin-bottom: 15rpx;
	}
	.tabTitle {
		height: 117rpx;
		width: 100%;
		
	}
	.tabTitleBox{
		width: 100%;
		background-color: #ffffff;
		margin: 0;
		min-height: 650rpx;
	}
	.wrap {
		padding: 40rpx;
	}
	.main_box{
		background-color: #F0F0F0;
	}
	.i_text{
		display: block;
		font-size: 32rpx;
		padding: 10rpx 30rpx;
	}
	.i_text:nth-child(1){
		font-weight: 800;
	}
	.i_text:nth-child(2){
		color: #f00;
	}
	.i_text:nth-child(3){
		color: #f00;
	}
</style>